<template>
  <ul class="formList onscroll">
    <li class="formItem" v-for="(item,index) in editList" :key="index">
      <viewText v-if="item.TYP ==='txt' || item.TYP ==='number'" :source="item" :ref="item._id"></viewText>
      <viewTextarea v-else-if="item.TYP ==='txtarea'" :source="item" :ref="item._id"></viewTextarea>
      <viewRadio v-else-if="item.TYP ==='radio'" :source="item" :ref="item._id"></viewRadio>
      <viewRadio v-else-if="item.TYP ==='radio'" :source="item" :ref="item._id"></viewRadio>
      <viewCheckbox v-else-if="item.TYP ==='checkbox'" :source="item" :ref="item._id"></viewCheckbox>
    </li>
  </ul>
</template>
<script>
import viewText from "./txt";
import viewTextarea from "./txtarea";
import viewRadio from "./radio";
import viewCheckbox from "./checkbox";
export default {
  name: "viewItem",
  props: {
    editList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    viewText,
    viewTextarea,
    viewRadio,
    viewCheckbox
  },
  methods:{
    async submit(){
      let task = [];
      let refs = this.$refs;
      for(let key in refs){
        if(refs[key][0].submit){
          task.push(refs[key][0].submit())
        }else{
          console.warn("submit 缺失",refs[key]);
        }
      }
      let res = await Promise.all(task);
       let dataObj = {};
      for(let key in res){
         let item = res[key];
         for(let i in item){
            dataObj[i] = item[i];
         }
      }
      return dataObj;
    }
  }
};
</script>
<style lang="scss" scoped>
.formList {
  height: 380px;
  overflow-y: auto;
  //position: relative;
  .formItem {
    padding: 6px;
    width: 98%;
    margin-bottom: 6px;
  }
}
</style>